<template>
  <a-modal :visible="previewVisible"
           width="100%"
           @cancel="previewVisible = false"
           :closable="false"
           :mask="false"
           :footer="null">
    <div v-if="previewVisible"
         class="imgCont"
         ref="imgCont"
         @mousewheel.prevent="rollImg($event)">
      <div class="iconBtn">
        <span class="refreshBtn">
          <a-icon @click.stop="outImg('out')"
                  type="zoom-out" />
          <a-icon type="zoom-in"
                  @click.stop="outImg('in')" />
          <a-icon @click.stop="rotate('left')"
                  type="redo" />
          <a-icon @click.stop="rotate('right')"
                  type="undo" />
          <a-icon @click.stop="closable"
                  type="close" />
          <slot name="addIcon"></slot>
        </span>
      </div>
      <img class="bigImage isSelected"
           ref="imgDiv"
           @mousedown.stop.prevent="moveImg($event)"
           id="img"
           :src="url" />
    </div>
  </a-modal>
</template>

<script>
import PropTypes from '@zh/common-utils/prop-types'
export default {
  name: 'VImgPreview',
  props: {
    url: PropTypes.string.def('')
  },
  components: {},
  data () {
    return {
      // 图片参数
      params: {
        zoomVal: 1,
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0
      },
      deg: 0,
      previewVisible: false
    }
  },
  computed: {

  },
  watch: {

  },
  created () {
    this.restImg()
  },
  mounted () {

  },
  methods: {
    open () {
      this.previewVisible = true
      // 初始化
      this.params = {
        zoomVal: 1,
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0
      }
      this.deg = 0
    },
    closable () {
      this.previewVisible = false
    },
    // mode==original 默认放大图片
    originalFunc () {
      this.params.zoomVal = 2
      this.restFunc()
    },
    // 初始化数据,重置数据
    restImg () {
      this.params.zoomVal = 1
      this.restFunc()
    },
    restFunc () {
      this.params.left = 0
      this.params.top = 0
      this.params.currentX = 0
      this.params.currentY = 0
      this.deg = 0
      if (this.$refs.imgDiv) {
        let img = this.$refs.imgDiv
        img.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`
        img.style.left = '50%'
        img.style.top = '50%'
      }
    },
    // 图片滚动放大
    rollImg (event) {
      this.params.zoomVal += event.wheelDelta / 1200
      this.rollFunc()
    },
    outImg (flag) {
      if (flag == 'out') {
        this.params.zoomVal -= 0.2
      } else {
        this.params.zoomVal += 0.2
      }
      this.rollFunc()
    },
    rollFunc () {
      let e = this.$refs.imgDiv
      if (this.params.zoomVal >= 0.2) {
        e.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`
      } else {
        this.params.zoomVal = 0.2
        e.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`
        return false
      }
    },

    // 图片旋转
    rotate (type) {
      let res = this.$refs.imgDiv
      this.deg = type == 'right' ? this.deg + 90 : this.deg - 90
      res.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`
    },
    // 图片移动
    moveImg (e) {
      // 获得该时间触发的时间戳
      let mouseDate = new Date().getTime()
      this.$emit('getMouseDate', mouseDate)
      e.preventDefault()
      // 获取元素
      let imgWrap = this.$refs.imgCont
      let img = this.$refs.imgDiv
      let x = e.pageX - img.offsetLeft
      let y = e.pageY - img.offsetTop
      // 添加鼠标移动事件
      imgWrap.addEventListener('mousemove', move)
      function move (e) {
        img.style.left = e.pageX - x + 'px'
        img.style.top = e.pageY - y + 'px'
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener('mouseup', () => {
        imgWrap.removeEventListener('mousemove', move)
      })
      // 鼠标离开父级元素，把事件移除
      imgWrap.addEventListener('mouseout', () => {
        imgWrap.removeEventListener('mousemove', move)
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/.ant-modal {
  height: 100%;
  position: initial;
  padding-bottom: 0;
}
/deep/.ant-modal-body {
  height: 100%;
  padding: 0 !important;
}
/deep/.ant-modal-content {
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: none;
}
.imgCont {
  text-align: center;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .iconBtn {
    position: absolute;
    text-align: right;
    left: 0;
    top: 0;
    height: 60px;
    line-height: 60px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    width: 100%;
    z-index: 100;
    font-size: calc(var(--font-size-20) + 6px);
    .refreshBtn {
      i {
        cursor: pointer;
        margin: 0 20px;
      }
    }
  }
  .bigImage {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: move;
    margin: 0 auto;
  }
  .isSelected {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}
</style>
